<!--
 * @description: 拖动上传
 拖拽文件上传，首先在页面上建立一个拖放区域，在拖放区域上绑定拖放事件，监听拖放事件drop内容中datTransfer中是包含files,如果存在files，获取files然后调用上传附件方法。
拖放区域可以通过事件dragover来检查拖放文件是否进入拖放区域来设置拖放区域悬浮样式，通过dragleave来检查离开拖放区取消悬浮样式。
 * @Date: 2023-06-26 15:08:29
 * @example: 
 * @params: 
-->
<template>
 <div class="uploader-drag" v-if="props.uploadMode == 'drag'" :class="['dragger', dragover ? 'dragover' : '']" @drop.prevent="onDrop" @dragover.prevent="onDragover"
     @dragleave.prevent="dragover = false">
     <div class="dragicon-box">
         <span>+</span>
     </div>
  </div>
</template>
<script setup>
const dragover = ref(false)
const onDrop = (e) => {
        const files = Array.from(e.dataTransfer?.files)
        dragover.value = false
        uploadFiles(files);
    }
const onDragover = () => {
        dragover.value = true
    }
</script>
<style lang='less' scoped>
</style>